<template>
  <div class="home-bg">
    <el-row class="home-row">
      <el-col :span="4" class="menu-col">
        <div class="menu-logo">
          <img src="/favicon.ico" class="logo-img" />
          <span class="menu-title">家庭宽带平台</span>
        </div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo custom-menu"
          background-color="transparent"
          text-color="#2d3a4b"
          active-text-color="#4f8cff"
        >
          <el-sub-menu index="1">
            <template #title>
              <span>网管处理</span>
            </template>
            <el-menu-item index="1-2" @click="handleItemClick('netupload')">文件上传</el-menu-item>
            <el-menu-item index="1-3" @click="handleItemClick('netdeal')">网管处理</el-menu-item>
            <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="2" @click="handleItemClick('radius')">
            <span>radius</span>
          </el-menu-item>
          <el-sub-menu index="3">
            <template #title>
              <span>告警</span>
            </template>
            <el-menu-item index="3-1" @click="handleItemClick('hwupload')">华为告警上传</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <span>小区健康度</span>
            </template>
            <el-menu-item index="4-1" @click="handleItemClick('upload')">文件上传</el-menu-item>
            <el-menu-item index="4-2" @click="handleItemClick('healthStatusCommunity')">生成健康度</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="5" @click="handleItemClick('test')">
            <span>测试页面</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" class="content-col">
        <div class="content-card">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import {useRouter} from "vue-router"
import axios from "../axios";
onMounted(()=>{
  axios.post("/sys/login",{
    password: "Admin@123",
    username: "admin"
  }).then(res=>{
    localStorage.setItem("token",res.data.token)
    console.log(res)
  })
})
const r=useRouter()
const handleItemClick = (selectedItem) => {
 r.push('/' + selectedItem);
};
</script>

<style scoped>
.home-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f7fa 100%);
  padding: 0;
}
.home-row {
  min-height: 100vh;
}
.menu-col {
  background: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 100%);
  border-radius: 0 24px 24px 0;
  box-shadow: 2px 0 16px 0 rgba(79,140,255,0.08);
  padding: 0 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.menu-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 0 18px 32px;
}
.logo-img {
  width: 36px;
  height: 36px;
  margin-right: 12px;
}
.menu-title {
  font-size: 20px;
  font-weight: 700;
  color: #4f8cff;
  letter-spacing: 1px;
}
.custom-menu {
  border: none;
  background: transparent;
  margin-top: 10px;
}
.custom-menu .el-menu-item, .custom-menu .el-sub-menu__title {
  border-radius: 8px;
  margin: 4px 12px;
  transition: background 0.2s;
}
.custom-menu .el-menu-item:hover, .custom-menu .el-sub-menu__title:hover {
  background: #e6f0ff !important;
  color: #4f8cff !important;
}
.content-col {
  background: transparent;
  padding: 36px 36px 0 36px;
  min-height: 100vh;
}
.content-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 32px 0 rgba(79,140,255,0.10), 0 1.5px 6px 0 rgba(79,140,255,0.08);
  min-height: 80vh;
  margin-bottom: 36px;
}
@media (max-width: 1200px) {
  .content-card {
  }
  .content-col {
    padding: 18px 8px 0 8px;
  }
  .menu-logo {
    padding-left: 8px;
  }
}
</style>